<template>

		<view class="content auto m-top40" v-if="infoData">
			<view class="rows" @click="toUrl(`/answer/studyList?id=${infoData.classify_id}`)">
				<headline :title="infoData.classify_name" all></headline>
				<view class="row p-top40 p-bot40 bot">
					<image :src="$imgUrls(infoData.classify_atlas)" mode="widthFix" class="rows"></image>
				</view>
			</view>
			<view class="row f-column p-top40 p-bot40 bot" 
			      v-for="(item,index) in infoData.goods" :key="index"
				  @click="toUrl(`/answer/play?goods_id=${item.goods_id}`);">
				<text class="color_1A size32 ellipsis_2">{{item.name}}</text>
				<view class="row j-sb a-center m-top20">
					<text class="color_AB h6">{{item.start_time}}</text>
					<view class="d-flex a-center">
						<text class="color_66 h6">共</text>
						<text class="color_E6 h6 bold">{{item.people_count}}</text>
						<text class="color_66 h6">人学习</text>
					</view>
				</view>
			</view>
			
		</view>
	
</template>

<script>
	import headline from '@/components/home/headline.vue'
	
	export default {
		name: "course",
		props: ['pageData'],
		components:{
			headline
		},
		data() {
			return {
				infoData: '',
			};
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo() {
				const pageData = this.pageData;
				const result = await this.$getBlockInfo(pageData.list);
				if (!result.list.length) return;
				this.infoData = result.list[0];
			}
		
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 674rpx;
	}
</style>